<template>
	<el-dialog title="物品列表" v-model="isShowDialog" fullscreen>
		<el-card shadow="hover" body-style="padding:8px; " id="flexTable">
			<div class="system-store-evidencelist-container">
				<el-tabs v-model="activeName" @tab-click="handleClick" style="height: 40px;overflow:hidden;">
					<el-tab-pane id="first" label="现有物品" name="first"></el-tab-pane>
					<el-tab-pane id="second" label="历史物品" name="second"></el-tab-pane>
				</el-tabs>
				<div style="height: 20px"></div>
				<el-form ref="refSearch" :inline="true" :model="formInline" size="mini">
					<el-form-item label-width="100px" prop="caseNo" label="案件编号">
						<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" prop="evidenceNo" label="物品编号">
						<el-input v-model="formInline.evidenceNo" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 20px">
						<el-button type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
						<el-button
							type="success"
							plain
							@click="exportExcel('flexTable', '导出的数据', `${activeTitle}` + '.xlsx')"
							icon="el-icon-document"
							size="small"
							>导出</el-button
						>
						<el-button type="warning" icon="el-icon-check" @click="pandian" size="small">盘点</el-button>
					</el-form-item>
				</el-form>
				<el-table
					ref="multipleTable"
					:data="tableData"
					:default-sort="{ prop: 'name', order: 'descending' }"
					:row-style="{ height: '37px' }"
					:cell-style="{ padding: '0' }"
					size="medium"
					style="width: 100%"
					@selection-change="handleSelectionChange"
				>
					<el-table-column align="center" type="selection" width="55" />
					<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
					<el-table-column align="center" property="caseNo" sortable label="案件编号" show-overflow-tooltip />
					<el-table-column align="center" property="inspectionNo" sortable label="关联编号" show-overflow-tooltip />
					<el-table-column align="center" property="caseName" sortable label="案件名称" show-overflow-tooltip />
					<el-table-column align="center" property="evidenceNo" sortable label="物品编号" show-overflow-tooltip />
					<el-table-column align="center" property="casePerson" sortable label="物品名称/数量" show-overflow-tooltip>
						<template #default="scope">
							{{ `${scope.row.evidenceName}/${scope.row.evidenceQuantity}` }}
						</template>
					</el-table-column>
					<el-table-column align="center" property="evidenceClassName" sortable label="物品类别" show-overflow-tooltip />
					<el-table-column align="center" property="evidencePerson" sortable label="颜色/获取时间" show-overflow-tooltip>
						<template #default="scope">{{ `${scope.row.extractionPersonName}/${dateFormat(scope.row.extractionDateTime)}` }}</template>
					</el-table-column>
					<el-table-column align="center" property="location" sortable label="存放位置" show-overflow-tooltip />
					<el-table-column align="center" property="status" sortable label="状态" show-overflow-tooltip>
						<template #default="scope">{{ `${getEvidenceStatus(scope.row.status)}` }}</template>
					</el-table-column>
					<el-table-column align="center" label="操作" width="150px">
						<template #default="scope">
							<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini" style="display: contents;color: var(--color-success);">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:page-sizes="[10, 20, 50, 100]"
					:page-size="formInline.pageSize"
					layout="prev, pager, next, jumper,total,sizes"
					:total="total"
					:current-page="formInline.page"
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					prev-text="上一页"
					next-text="下一页"
					background
				>
				</el-pagination>
			</div>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { useRouter } from 'vue-router';
import { queryPagerBoxCaseEvidences } from '/@/api/evidence/index';
import { dateFormat, getEvidenceStatus } from '/@/common/index';
import { exportExcel } from '/@/common/excel';
import { ElMessageBox, ElMessage } from 'element-plus';
import { savePanDianTask } from '/@/api/case/index';
export default {
	name: 'SystemStoreEvidencelist',
	components: {},
	setup() {
		const state = reactive({
			isShowDialog: false,
			formInline: {
				caseNo: '',
				inspectionNo: '',
				locationId: 0,
				evidenceNo:"",
				historyStatus: 0,
				pageSize: 10,
				page: 1,
			},
			checkRecords:[],
			activeName: 'first',
			activeTitle: '现有物品',
			total: 0,
			tableData: [],
		});
		const router = useRouter();
		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.caseId },
			});
		};
		// 打开弹窗
		const openDialog = (id: any) => {
			state.isShowDialog = true;
			state.formInline.locationId = id;
			init();
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		function init() {
			queryPagerBoxCaseEvidences(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		function onHandleSizeChange(pageSize: number) {
			state.formInline.page = 1;
			state.formInline.pageSize = pageSize;
			init();
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.formInline.page = pageIndex;
			init();
		}
		function onSearch() {
			state.formInline.page = 1;
			init();
		}
		function onRest() {
			refSearch.value.resetFields();
		}
		function handleClick() {
			if (state.activeName == 'first') {
				state.activeTitle = '现有物品';
				state.formInline.historyStatus = 0;
			}
			if (state.activeName == 'second') {
				state.activeTitle = '历史物品';
				state.formInline.historyStatus = 1;
			}
			state.formInline.page = 1;
			state.formInline.pageSize = 10;
			init();
		}
		function handleSelectionChange(value) {
			state.checkRecords = value;
		}
		async function pandian() {
			var taskdata = new Array();
			for (var i = 0; i < state.checkRecords.length; i++) {
				var _data = state.checkRecords[i];
				if(_data.rfid || _data.evidenceNo){
					taskdata.push({ evid: _data.evidenceId  });
				}
			}
			if(taskdata.length == 0){
				ElMessage({
					message: '无可盘点物品！',
					type: 'warning',
				});
				return;
			}
			pandianForMR730(taskdata); 
		}
		async function pandianForMR730(taskdata) {
			var ids = taskdata.map(function(a){ return a.evid;});
			ElMessageBox.prompt('请输入盘点计划名称：', '盘点', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(({ value }) => {
				if(value){
					var data = { name: value, ids: ids };
					savePanDianTask(JSON.stringify(data)).then((res) => {
						if (res.success) {
							ElMessage({ message: '盘点计划,添加成功', type: 'success' });
						} else {
							ElMessage.error(res.msg);
						}
					});
				}
			}).catch(() => {
				//取消
			}); 
		}
		const refSearch = ref();
		return {
			onDetailsInfo,
			openDialog,
			onCancel,
			getEvidenceStatus,
			dateFormat,
			onSearch,
			onRest,
			refSearch,
			pandian,
			onHandleSizeChange,
			onHandleCurrentChange,
			handleSelectionChange,
			handleClick,
			exportExcel,
			...toRefs(state),
		};
	},
};
</script>
<style>
.system-store-evidencelist-container .el-tabs .el-tabs__content {
	height: 40px !important;
	min-height: 40px !important;
}
</style>
